<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var formdata = false;
function uploadSelection() {
	//console.debug("uploadSelection");
    //var imgData = document.getElementById('panel').toDataURL("image/png");
    //var postStr = "i=" + encodeURIComponent(imgData);
    //$.post('saveUpload.php', postStr, function(resp) {alert('Success - ' + resp);});    
	var c = document.getElementById("panel");
	formdata = new FormData();
	formdata.append("images[]", c.mozGetAsFile("foo1.png"));
	$.ajax({
		url : "upload.php",
		type : "POST",
		data : formdata,
		processData : false,
		contentType : false,
		success : function(res) {
			document.getElementById("response").innerHTML = res;
		}
	});
}

function getResults() {
	var c = document.getElementById("panel");
    var vData = c.toDataURL("image/png");
    $('#crop_result').attr('src', vData);   
}

$(function(){			
	if (window.FormData) {
		formdata = new FormData();
	}
	
	$("#file").change(function() {
		console.debug("file onchanged");
		var i = 0, len = this.files.length, img, reader, file;
		//Load image len div "image-list"
		for (; i < len; i++) {
			file = this.files[i];
			if (!!file.type.match(/image.*/)) {
				var c = document.getElementById("panel");
				var ctx = c.getContext("2d");
				
				img = document.createElement("img");
				
				img.onload = function() {
					ctx.drawImage(img, 0, 0);
				};						
				img.src = window.URL.createObjectURL(file);	
				c.width = 100;
				c.height= 100;
				ctx.drawImage(img, 0, 0,100,100);
				//c.width = img.width;
				//c.height = img.height;	
				console.debug(img.width);
				console.debug(img.height);
				console.debug("have draw image");
				
				if (formdata) {
					formdata.append("images[]", c.mozGetAsFile("foo.png"));
				}
			}
		}
		
	});
});	
</script>
</head>
<body>
	<canvas id="panel" width="200" height="200"></canvas>
	<form id="form1" name="form1" action="false" enctype="multipart/form-data">
		<p>
			From client: <input type="file" name="file" id="file" />
		</p>
		
	</form>
	<button id='uploadBtn' onClick='uploadSelection();'>Upload Selection</button>
	<div id="response">test</div>
	
	<button onclick="getResults()">Crop</button>
	<img id="crop_result" />
</body>
</html>